<script lang="ts" setup>
import { DataItem } from '@/modules/service'
import { ref } from 'vue'

const loading = ref(true)
const data = ref([])
const columns = [
  {
    title: '祝福',
    dataIndex: 'text',
    align: 'center',
  },
  {
    title: '审核',
    dataIndex: 'isPass',
    align: 'center',
    width: '170px'
  },
]

async function getCommentList() {
  loading.value = true
  const res = await DataItem.getCommentList()
  data.value = res.data
  loading.value = false
}

getCommentList()

async function pass(a: any) {
  await DataItem.checkOk(a)
  await getCommentList()
}

async function stop(a: any) {
  await DataItem.checkFailed(a)
  await getCommentList()
}


</script>

<template>
  <div class="ant-admin-main">
    <div class="ant-header">留言管理</div>
    <div class="ant-table">
      <a-table v-loading="loading" :columns="columns" :data-source="data" :pagination="{ pageSize: 10 }" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'isPass'">
            <a-button @click="pass(record.id)">通过</a-button>
            <a-button danger style="margin-left: 16px" @click="stop(record.id)">拒绝</a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style scoped>
.ant-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 24px;
  color: white;
  font-weight: 600;
}

.ant-table {
  overflow-y: scroll;
  max-width: 740px;
  border-radius: 8px;
  margin: auto;
  padding: 8px;
}

:deep(.ant-table-tbody>tr>td) {
  padding: 8px;
}
</style>